<template>
  <van-field :label="field.label" :rules="field.rules">
    <template #input>
      <van-radio-group v-model="fieldValue" direction="horizontal">
        <van-radio
          v-for="option in options"
          :key="option.value"
          :name="option.value"
        >
          {{ option.label }}
        </van-radio>
      </van-radio-group>
    </template>
  </van-field>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  field: {
    type: Object,
    required: true,
  },
  modelValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  options: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue"]);

const fieldValue = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});
</script>
